<script lang="ts" setup>
import { onMounted, ref, nextTick, withDefaults } from 'vue'
import { FunnelOutline as FilterIcon } from '@vicons/ionicons5'

interface TableHeaderProps {
  searchContentHeight: string
}

const props = withDefaults(defineProps<TableHeaderProps>(), {
  searchContentHeight: '300px',
})
const showSearchContent = ref(false)
const target = ref<HTMLElement | null>(null)
const emit = defineEmits(['search', 'reset-search'])
onMounted(() => {
  nextTick(() => {
    target.value = document.getElementById('tableHeaderContainer')
  })
})
function doSearch() {
  showSearchContent.value = false
  emit('search')
}
function doResetSearch() {
  emit('reset-search')
}
</script>

<template lang="pug">
div(class="flex justify-end m-1 items-center gap-1 relative" id="tableHeaderContainer")
  div()
  n-button(type="warning" size="small" @click="showSearchContent = !showSearchContent") 筛选
    template(#icon)
      n-icon
        FilterIcon
  slot(name="rightBtn")
n-drawer(v-model:show="showSearchContent" placement="top" :to="target" :height="props.searchContentHeight")
  n-drawer-content(body-content-style="overflow: hidden;" title="搜索条件" closable header-style="font-size: 16px; padding: 15px")
    template(#default)
      slot(name="searchForm")
    template(#footer)
      div(class="flex justify-end")
        n-space
          n-button(type="warning" size="small" @click="doResetSearch") 重置
          n-button(type="primary" size="small" @click="doSearch") 搜索
</template>

<style lang="scss" scoped></style>
